<template>
  <div class="components-input-demo-presuffix">
    <CloudInput ref="userNameInput" v-model="userName" placeholder="Basic usage">
      <CloudIcon slot="prefix" type="user" />
      <CloudTooltip slot="suffix" title="Extra information">
        <CloudIcon type="info-circle" style="color: rgba(0,0,0,.45)" />
      </CloudTooltip>
    </CloudInput>
    <br />
    <br />
    <CloudInput prefix="￥" suffix="RMB" />
  </div>
</template>

<script>
export default {
  title: '2.前缀和后缀',
  data() {
    return {
      userName: '',
    };
  },
  methods: {
    emitEmpty() {
      this.$refs.userNameInput.focus();
      this.userName = '';
    },
  },
};
</script>